/*
 * Copyright (C) 2015 Actor LLC. <https://actor.im>
 */

.input {
  &--search {
    line-height: 24px;

    box-sizing: border-box !important;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 3px 10px;

    color: rgba(black, .3);
    border: none;
    border-radius: 4px;
    background-color: rgba(black, .05);
    box-shadow: none;
    outline: none;

    appearance: none !important;
  }
}

.search {
  position: relative;
  z-index: 20;

  display: none;

  width: $activity-width;

  background-color: white;
  box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, .04);
  @include no-mp();
  &--opened {
    display: block;
  }
  &--expanded {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;

    width: 100% !important;
  }

  &__expand {
    position: absolute;
    top: 0;
    left: 0;

    width: 24px;
    height: 32px;

    cursor: pointer;
    text-align: center;

    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .05);
    .material-icons {
      font-size: 16px;
      line-height: 32px;

      color: $greyish;
      &:last-child {
        margin-left: -12px;
      }
    }
    &:hover {
      .material-icons {
        color: $dark-sky-blue;
      }
    }
  }

  &__header {
    padding-left: 24px;
  }
  &__body {
    position: absolute;
    top: 32px;
    bottom: 0;

    overflow-x: hidden;
    overflow-y: auto;

    width: 100%;
  }

  &__filter {
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, .05);

    @include no-mp();
    @include no-select();
    &__item {
      font-size: 12px;
      font-weight: 500;
      line-height: 24px;

      display: inline-block;

      padding: 4px 16px;

      list-style: none;

      cursor: pointer;
      text-align: center;
      text-transform: uppercase;

      color: $greyish;
      &:hover {
        color: $dove-gray;
      }
      &--active {
        cursor: default;

        color: $dark-sky-blue !important;
        box-shadow: inset 0 -2px 0 0 $dark-sky-blue !important;
      }
    }
  }

  &__results {
    @include no-mp();
    &__item {
      margin: 0;
      //cursor: pointer;
      padding: 12px 16px;

      list-style: none;
      //box-shadow: 0 -1px 0 0 rgba(black, .07);

      border-bottom: 1px solid rgba(black, .04);
      //&:hover {
      //  background-color: rgba(darken($dark-sky-blue, 50), .03);
      //}

      &__body {
        padding-left: 16px;
      }

      &--message {
        .title {
          font-size: 13px;
          font-weight: 500;
          line-height: 16px;

          display: inline-block;

          margin: 0 0 8px;
          margin-right: 4px;
          padding: 0;

          color: rgba(0, 0, 0, .8);
        }
        .time {
          font-size: 12px;
          line-height: 16px;

          color: rgba(57, 57, 57, .3);
        }
        .content {
          font-size: 13px;
          line-height: 16px;

          color: rgba(0, 0, 0, .6);
        }

        .text {
          p {
            margin: 0;
          }
          a {
            text-decoration: none;

            color: $dark-sky-blue;
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }

      &--not-found,
      &--empty {
        padding: 32px 16px;

        text-align: center;

        color: rgba(black, .2);
      }
    }
  }

  @media (max-width: 1050px) {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
  }
}
